<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"
	/>
	<meta name="format-detection" content="tephone=no,email=no,date=no,address=no">
	<link rel="stylesheet" type="text/css" href="../css/aui.css" />
	<style type="text/css">

	</style>
</head>

<body>
	<div id="content">
		<!--<div class="aui-content">
			<div class="aui-card-list">
				<div class="aui-card-list-content">
					<img :src="live.coverImg" />
				</div>
				<div class="aui-card-list-header">
					{{live.title}}
				</div>
				<div class="aui-card-list-footer aui-padded-t-0">
					<div class="aui-label" v-show="live.closed">
						{{live.status}}
					</div>
					<div class="aui-label aui-label-danger" v-show="!live.closed">
						{{live.status}}
					</div>
					<div>
						<i class="aui-iconfont aui-icon-display"></i>{{live.viewQty}}人
					</div>
				</div>
				<div class="aui-card-list-footer aui-padded-t-0" style="background: #FFFFFF;">
					{{live.summary}}
				</div>
			</div>
		</div>-->
		<section class="aui-content">
			<div class="aui-timeline">
				<div v-for="item in live_record_list">
					<div class="aui-timeline-item-header">
						{{item.addTimeDesc}}
					</div>
					<div class="aui-timeline-item">
						<!--<div class="aui-timeline-item-label aui-bg-info text-light">
								{{item.author}}
							</div>-->
						<div class="aui-timeline-item-label">
							<img :src="item.headImg" />
						</div>
						<div class="aui-timeline-item-inner">
							<div class="aui-card-list">

								<div class="aui-card-list-content-padded">
									{{{item.content}}}
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>
	</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/vue.min.js"></script>
<script type="text/javascript" src="../script/sockjs.js"></script>
<script type="text/javascript" src="../script/stomp.min.js"></script>
<script type="text/javascript">
	var vm;
	apiready = function () {
		var liveId = api.pageParam.id;
		vm = new Vue({
			el: "#content",
			data: {
				live: {},
				live_record_list: [],
				page_index: 1,
				video_player: null
			},
			ready: function () {
				//获取直播基本信息
				$api.get('http://mu.biachina.com/api/live/' + liveId, function (ret) {
					vm.live = ret;
					if (ret.status === '正在直播') {
						//拉取历史信息
						$api.get('http://mu.biachina.com/api/liveRecord/list-desc?liveId=' + liveId + "&pageIndex=" + vm.page_index, function (ret) {
							vm.live_record_list.push.apply(vm.live_record_list, ret.list);
						}, 'json');
						api.addEventListener({
							name: 'scrolltobottom',
							extra: {
								threshold: 0 //设置距离底部多少距离时触发，默认值为0，数字类型
							}
						}, function (ret, err) {
							console.log('bottom 正在直播');
							vm.page_index++;
							$api.get('http://mu.biachina.com/api/liveRecord/list-desc?liveId=' + liveId + "&pageIndex=" + vm.page_index, function (ret) {
								vm.live_record_list.push.apply(vm.live_record_list, ret.list);
							}, 'json');
						});
						//创建websocket监听
						var url = 'http://mu.biachina.com/web-socket';
						var sock = new SockJS(url);
						stompClient = Stomp.over(sock);
						stompClient.connect('guest', 'guest', function (frame) {
							stompClient.subscribe('/topic/live/' + liveId, function (data) {
								vm.live_record_list.$set(0, JSON.parse(data.body));
							});
						});
					} else {
						$api.get('http://mu.biachina.com/api/liveRecord/list?liveId=' + liveId + "&pageIndex=" + vm.page_index, function (ret) {
							vm.live_record_list.push.apply(vm.live_record_list, ret.list);
						}, 'json');
						api.addEventListener({
							name: 'scrolltobottom',
							extra: {
								threshold: 0 //设置距离底部多少距离时触发，默认值为0，数字类型
							}
						}, function (ret, err) {
							console.log('bottom 未直播');
							vm.page_index++;
							$api.get('http://mu.biachina.com/api/liveRecord/list?liveId=' + liveId + "&pageIndex=" + vm.page_index, function (ret) {
								vm.live_record_list.push.apply(vm.live_record_list, ret.list);
							}, 'json');
						});
					}

				}, 'json');
			},
			methods: {
			}
		});
	};

</script>

</html>